.title {
        text-align: center;
        font-size: 250%;
        padding-top: 0%;
        margin-top: 5%;
        margin-bottom: 0%;
        padding: 0px;
        color: black;
        font-family: "Playfair Display", serif;
        font-weight: bold;
}

h2{
    font-size: 230%;
    font-family: 'Playfair';
    margin: 0;
    color: rgb(13, 13, 13);
}

@media (hover: none) {
    #info {
        margin-left: 7%;
        margin-right: 7%;
    }
}   

#info {
    padding-bottom: 50px;
}


p {
    padding-bottom: 3%;
}

  .toggleContainer {
     position: relative;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     width: fit-content;
     border: 3px solid #343434;
     border-radius: 20px;
     background: #343434;
     font-weight: bold;
     color: #343434;
     cursor: pointer;
   }
   .toggleContainer::before {
     content: '';
     position: absolute;
     width: 50%;
     height: 100%;
     left: 0%;
     border-radius:20px;
     background: white;
     transition: all 0.3s;
   }
   .toggleCheckbox:checked + .toggleContainer::before {
      left: 50%;
   }
   .toggleContainer div {
     padding: 6px;
     text-align: center;
     z-index: 1;
   }
   .toggleCheckbox {
     display: none;
   }
   .toggleCheckbox:checked + .toggleContainer div:first-child{
     color: white;
     transition: color 0.3s;
   }
   .toggleCheckbox:checked + .toggleContainer div:last-child{
     color: #343434;
     transition: color 0.3s;
   }
   .toggleCheckbox + .toggleContainer div:first-child{
     color: #343434;
     transition: color 0.3s;
   }
   .toggleCheckbox + .toggleContainer div:last-child{
     color: white;
     transition: color 0.3s;
   }